<template>
	<m-layout gap="24" title="AI美食机代理区域">
		<m-block class="flex-1" bgColor="unset">
			<template v-for="(item,index) in listArr">
				<m-block gap="30 30" spa="12 0 0 0 " class="dataList">
					<view class="h1 flex-between">
						<view class="left">
							<view class="flex">
								<m-icon size="32" type="icon-touxiang" color="var(--text_thenme)"></m-icon>
								<text class="fs30">{{item.username}}</text>
							</view>
							<!-- <view class="flex text-white fs21 mb-16 pl-40">
								<text>姓名：</text>
								<text>{{item.truename}}</text>
							</view> -->
						</view>
						<view class="">
							<view class="right dls flex-center  plr-16 ptb-8">
								<m-icon v-if="item.dls" type="icon-gongyingshangdailishang" class="mr-8"
									color="#FFF"></m-icon>
								<text class="fs21">{{ hhrEnum[item.dls]||'普通用户' }}</text>
							</view>
						</view>
					</view>
					<view class="content">
						<view class="content-1 flex-between">
							<view class="dl">
								<view class="dt">个人业绩</view>
								<view class="dd">
									<m-number :value="item.selfamount" color="#333" weight="600" size="26"></m-number>
								</view>
							</view>
							<m-image src="../../../static/images/pages/c2c/border-icon.png" :size="[3,100]"></m-image>
							<view class="dl">
								<view class="dt">管理业绩</view>
								<view class="dd">
									<m-number :value="item.zta" color="#333" weight="600" size="26" />
								</view>
							</view>
							<m-image v-if="Number(item.dls)" src="../../../static/images/pages/c2c/border-icon.png"
								:size="[3,100]"></m-image>
							<view v-if="Number(item.dls)" class="dl">
								<view class="dt">代理业绩</view>
								<view class="dd">
									<m-number :value="Number(item.teamamount)" color="#333" weight="600" size="26" />
								</view>
							</view>
						</view>
						<view class="content-1 flex-between">
							<view class="dl">
								<view class="dt">
									个人设备总数
								</view>
								<view class="dd">
									<text class="fs26 fw-600">{{item.selfcount2}}</text>
								</view>
							</view>
							<m-image src="../../../static/images/pages/c2c/border-icon.png" :size="[3,100]"></m-image>
							<view class="dl">
								<view class="dt">
									已生效(个人)
								</view>
								<view class="dd">
									<text class="fs26 fw-600">{{item.selfValid}}</text>
								</view>
							</view>
							<m-image src="../../../static/images/pages/c2c/border-icon.png" :size="[3,100]"></m-image>
							<view class="dl">
								<view class="dt">
									建设中(个人)
								</view>
								<view class="dd">
									<text class="fs26 fw-600">{{item.selfInst}}</text>
								</view>
							</view>
						</view>
						<view class="content-1 flex-between">
							<view class="dl">
								<view class="dt">
									管理设备总数
								</view>
								<view class="dd">
									<text class="fs26 fw-600">{{item.ztcount2}}</text>
								</view>
							</view>
							<m-image src="../../../static/images/pages/c2c/border-icon.png" :size="[3,100]"></m-image>
							<view class="dl">
								<view class="dt">
									已生效(管理)
								</view>
								<view class="dd">
									<text class="fs26 fw-600">{{item.ztValid}}</text>
								</view>
							</view>
							<m-image src="../../../static/images/pages/c2c/border-icon.png" :size="[3,100]"></m-image>
							<view class="dl">
								<view class="dt">
									建设中(管理)
								</view>
								<view class="dd">
									<text class="fs26 fw-600">{{item.ztInst}}</text>
								</view>
							</view>
						</view>
						<view class="content-1 flex-between">
							<view class="dl">
								<view class="dt">
									代理设备总数
								</view>
								<view class="dd">
									<text class="fs26 fw-600">{{item.teamcount2}}</text>
								</view>
							</view>
							<m-image src="../../../static/images/pages/c2c/border-icon.png" :size="[3,100]"></m-image>
							<view class="dl">
								<view class="dt">
									已生效(代理)
								</view>
								<view class="dd">
									<text class="fs26 fw-600">{{item.teamValid}}</text>
								</view>
							</view>
							<m-image src="../../../static/images/pages/c2c/border-icon.png" :size="[3,100]"></m-image>
							<view class="dl">
								<view class="dt">
									建设中(代理)
								</view>
								<view class="dd">
									<text class="fs26 fw-600">{{item.teamInst}}</text>
								</view>
							</view>
						</view>
					</view>
					<view class="h3 flex">
						<m-icon size="32" type="icon-dengdaizhong" color="var(--text_thenme)" class="mr-12"></m-icon>
						<text class="fs24">注册时间：{{item.ctime | mkfsTime}}</text>
					</view>
				</m-block>
			</template>
			<m-loading :list="listArr" :pageIndex="pageIndex" :pageCount="pageCount"></m-loading>
		</m-block>
	</m-layout>
</template>

<script>
	import { teamtotalw3,mytotal } from "../../../api/Users.js"
	export default {
		name: '',
		data() {
			return {
				myTotal: {}, //  我的个人业绩
				scrollTop: 0,
				listArr: [], // 列表
				pageSize: 20,
				pageIndex: 1,
				pageCount: 1,
				isLoading: true,
			};
		},
		computed: {
			hhrEnum() {
				const state = this.$store.state.general.enum;
				console.log('dls', state['dls']);
				return state['Hhr']
			},
		},
		watch: {
			idx(val) {
				this.init();
			}
		},
		onPageScroll({ scrollTop }) {
			this.scrollTop = scrollTop;
		},
		onShow() {
			this.$nextTick(() => {
				this.getMyTotal()
				this.init();
			});
		},
		methods: {
			init() {
				this.pageCount = 1;
				this.pageIndex = 1;
				this.getData();
			},
			async getMyTotal() {
				const { success, msg, data } = await mytotal();
				this.myTotal = data;
			},
			// 获取分页数据数据
			async getData() {
				if (this.pageIndex > this.pageCount) {
					return
				}
				this.isLoading = true;
				const { list, pageCount } = await teamtotalw3({
					pageSize: this.pageSize,
					pageIndex: this.pageIndex,
				});
				console.log('list===>', list)
				this.isLoading = false;
				this.pageCount = pageCount;
				if (this.pageIndex <= 1) {
					this.listArr = list;
				} else {
					this.listArr = [...this.listArr, ...list];
				}
				this.pageIndex++;
				uni.stopPullDownRefresh();
			}
		},
		onPullDownRefresh() {
			this.init();
		},
		onReachBottom() {
			this.getData();
			console.log("触底了");
		},
	};
</script>

<style lang="scss">
	page {}

	.head {
		border-radius: 20rpx;
		background: url('../../../static/images/pages/reward-center/bg2.png') no-repeat;
		background-size: 100% 100%;

		.h1 {
			padding: 25rpx 0;

			.dl {
				padding-left: 30rpx;

				.dt {
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #423600;
				}
			}
		}

		.line {
			margin-right: 40rpx;
			display: inline-block;
			width: 1rpx;
			height: 30rpx;
			background: #333333;
			border-radius: 1rpx;
		}

		.h2-box {
			padding: 0 30rpx;
			background: rgba(125, 102, 0, 0.1);
		}

		.h2 {
			padding: 15rpx 0;
			display: grid;
			grid-template-columns: 1fr 1fr 1fr;

			.dl {
				text-align: left;
				flex: 1;

				.dt {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #423600;
					padding-bottom: 10rpx;
				}

				.dd {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 600;
					color: #423600;
				}
			}

			.dl+.dl {
				padding-left: 40rpx;
				position: relative;

				&::after {
					content: "";
					display: inline-block;
					width: 1rpx;
					height: 30rpx;
					background: #333333;
					border-radius: 1rpx;

					position: absolute;
					left: 0;
					top: 50%;
					transform: translateY(-50%);
				}
			}
		}

		.h2+.h2 {

			border-top: 1rpx solid #423600;
		}
	}

	.content {
		padding: 20rpx 0;

		.content-1 {
			border-radius: 21rpx;
			background: #FBFBFB;
			padding: 6rpx 0;

			.dl {
				flex: 1;
				text-align: center;

				.dt {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #999999;
				}

				.dd {}
			}
		}

		.content-1+.content-1 {
			margin-top: 12rpx;
		}
	}

	.dataList {
		.h1 {
			.left {
				text {
					padding-left: 10rpx;
					font-size: 34rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					color: #333333;
				}
			}

			.right {
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
			}
		}

		.h2 {
			margin: 24rpx 0;
			padding: 22rpx;
			background: #FBFBFB;
			border-radius: 10rpx;

			view {
				text {
					padding-left: 15rpx;
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #333;
				}
			}
		}

		.h3 {
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #999999;
		}
	}

	.dls {
		background: linear-gradient(86deg, #2acf4d, #efc51c);
		border-radius: 40rpx;
		color: #fff;
	}
</style>